<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="format-detection" content="telephone=no">
    <meta charset="utf-8">
    <link href="css/chatInfo.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.12.0.min.js"></script>
    <script src="js/vue.js"></script>
</head>

<body>
<div id="chatInfo">
    <div class="top"  v-on:click="showSendImg(false)">
        <p style="margin-left: 1%; float:left; width: 20%; line-height: 60px;text-align: center; overflow: hidden;height: 60px;">返回(99+)</p>
        <p style="margin-left: 5%;margin-right: 5%; float:left; width: 50%; line-height: 60px; text-align: center">董小傻</p>
        <p style="margin-right: 1%; float:right; width:15%;  line-height: 60px;text-align: center">详情</p>
        <div style="clear: both"></div>
    </div>
    <div class="mid" id="mid"  v-on:click="showSendImg(false)">
        <div class="mid-body" v-bind:class="{vmargin: isChooseImg}">
            <div id="wrapper" style="-webkit-overflow-scrolling : touch; ">
                <ul style="padding: 0" >
                    <li v-for="(data,key) in chatInfo">

                        <!--<div v-if="data.type == 'mid'">-->
                            <div class="chat-mid">
                                <p class="time">{{data.date}}</p>
                            </div>
                        <!--</div>-->

                        <div v-if="data.user_send == my">
                            <div class="chat-left">
                                <img class="userimg"  src="images/face.jpg">
                                <p v-if="data.message_type == 1" class="msg-word">
                                    {{data.message}}
                                </p>
                                <img v-if="data.message_type == 2" :src="data.message" @click="changeBig(key)" alt="" class="imgMin">
                            </div>
                        </div>

                        <div v-if="data.user_received == my">
                            <div class="chat-right">
                                <img class="userimg"  src="images/face.jpg">
                                <!--<p class="msg-word">-->
                                    <!--<span style="float: right">-->
                                       <!--{{data.message}}-->
                                    <!--</span>-->
                                    <!--<span style="clear: both"></span>-->
                                <!--</p>-->
                                <p v-if="data.message_type == 1" class="msg-word">
                                      <span style="float: right">
                                       {{data.message}}
                                    </span>
                                    <span style="clear: both"></span>
                                </p>
                                <img v-if="data.message_type == 2" v-bind:src="data.message" @click="changeBig(key)" alt=""  class="imgMin}" style="float: right">
                                <span style="clear: both"></span>
                            </div>
                        </div>

                        <div style="clear: both">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="foot">
        <div class="foot-body" >
            <input type="text" name="inputText" class="inputText" v-bind:value="chatMsg" v-model="chatMsg">
            <input type="button" class="inputSend" value="发送" v-on:click="sendChat(chatMsg, 1)">
            <input type="button" class="inputSend" value="选择" v-on:click="showSendImg(true)">
        </div>
        <div v-if="isChooseImg == true" class="chooseImg">
            <div class="upfilePhoto">图片
                <input type="file" class=""  name="chooseImg" id="chooseImg" type="file"  accept="image/*" value="图片"  @change="uploadImg('chooseImg')">
            </div>
            <div class="upfilePhoto">拍摄
                <input type="file" class=""  name="chooseImg" id="chooseImgCam" type="file"  accept="image/*" capture="camera" value="拍摄" @change="uploadImg('chooseImgCam')">
            </div>
        </div>
    </div>

    <div class="showBigImg" v-if="bigImgShow == true" @click="changeBig(-1)">
        <div class="bigImgDiv">
            <img :src="bigImgSrc" alt="" class="bigImg">
        </div>
    </div>

</div>



<script>
    var app = new Vue({
        el: '#chatInfo',
        data : {
            chatInfo: parent.all.chatInfo,
            my: parent.all.my,
            other: '',
            chatMsg:'',
            isChooseImg:false,
            bigImgShow:false,
            bigImgSrc:'/public/userChatImg/544e88ca484e68d827e4371e78a4c474.JPG'
        },
        created() {
            this.other = this.getQueryString('user');
        },
        methods:{
            getQueryString:  function (name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]); return null;
            },
            sendChat:function (msg, type) {
                if (msg) {
                    parent.all.wsSendChatList(app.other, msg, type);
                    this.chatMsg = '';
                }
            },
            showSendImg:function (status) {
                this.isChooseImg = status;
            },

            uploadImg:function (id) {

                var pic = $('#'+id)[0].files[0];
                var fd = new FormData();
                fd.append('chooseImg', pic);

                $.ajax({
                    url:"http://192.168.20.10/upload.php",
                    type:"post",
                    // Form数据
                    data: fd,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success:function(data){
                        var data = JSON.parse(data);
                        console.log(data);
                        if (data.status == 0) {
                            parent.all.wsSendChatList(app.other, data.imgUrl, 2);
                        }
                    }
                });
            },
            changeBig:function (index) {
                if (index < 0) {
                    this.bigImgShow = false;
                } else {
                    this.bigImgShow =  true;
                    this.bigImgSrc = app.chatInfo[index].message;
                }
            }
        },
        updated: function () {
            console.log(document.getElementById('mid').scrollHeight);
            document.getElementById('mid').scrollTop = document.getElementById('mid').scrollHeight;
        }
    });

    parent.all.wsGetChatInfo(app.other, 1);
    document.getElementById('mid').scrollTop = document.getElementById('mid').scrollHeight;
</script>
</body>
</html>